<script setup>
import {ref, onBeforeUnmount, watch, computed} from 'vue';
import {useI18n} from "vue-i18n";
import {FileText, Clock, Trophy, Star} from 'lucide-vue-next';

const ALL_PASSAGES = [
  {
    id: 1,
    title: '人工智能的未来发展',
    content: `人工智能技术在过去十年中取得了巨大进步。从语音识别到图像处理，从自动驾驶到医疗诊断，AI正在改变着我们的生活方式。\n\n机器学习算法的不断改进使得计算机能够处理越来越复杂的任务。深度学习网络可以识别语音中的细微差别，计算机视觉技术能够比人眼更准确地诊断某些疾病。\n\n然而，人工智能的发展也带来了挑战。工作岗位的自动化可能导致失业问题，算法偏见可能加剧社会不平等。此外，随着AI系统变得更加智能，我们需要确保它们的决策过程是可解释和可控制的。\n\n专家们认为，未来的AI发展应该注重责任和伦理。我们需要建立相应的法律框架来规范AI的使用，同时加强对AI安全性的研究。只有这样，人工智能才能真正造福人类社会。`,
    questions: [{
      id: 1,
      question: '根据文章，人工智能在哪些领域取得了进步？',
      options: ['仅在语音识别', '语音识别、图像处理、自动驾驶和医疗诊断', '只在医疗领域', '主要在娱乐行业'],
      correct: 1,
      type: 'detail'
    }, {
      id: 2,
      question: '文章提到的AI发展挑战不包括：',
      options: ['工作岗位自动化', '算法偏见', '技术成本过高', '决策过程的可解释性'],
      correct: 2,
      type: 'detail'
    }, {
      id: 3,
      question: '作者对AI未来发展的态度是：',
      options: ['完全乐观', '谨慎乐观，强调责任和伦理', '悲观担忧', '中性客观'],
      correct: 1,
      type: 'attitude'
    }],
    difficulty: 'medium',
    wordCount: 280,
    timeLimit: 180
  },
  {
    id: 2,
    title: '城市绿化的重要性',
    content: `城市绿化是现代城市规划中不可或缺的组成部分。随着城市化进程的加快，城市人口密度不断增加，绿化空间显得尤为珍贵。\n\n城市绿化带来的好处是多方面的。首先，植物能够吸收二氧化碳，释放氧气，有效改善空气质量。其次，绿色植物可以调节气温，在炎热的夏季为城市降温，形成城市`,
    questions: [{
      id: 1,
      question: '城市绿化的主要好处包括：',
      options: ['仅仅美化环境', '改善空气质量、调节气温、减少噪音', '只能提供休闲场所', '主要是经济效益'],
      correct: 1,
      type: 'main_idea'
    }, {
      id: 2,
      question: '文中的"绿岛效应"指的是：',
      options: ['绿化带来的经济效应', '绿色植物调节气温的作用', '绿化对房价的影响', '绿化的视觉效果'],
      correct: 1,
      type: 'vocabulary'
    }, {
      id: 3,
      question: '根据文章，城市绿化面临的主要挑战是：',
      options: ['植物种类选择困难', '土地成本高昂和维护费用', '居民不支持', '技术水平不够'],
      correct: 1,
      type: 'detail'
    }, {
      id: 4,
      question: '从文章可以推断出：',
      options: ['城市绿化完全没有必要', '城市绿化需要在发展与环保间平衡', '绿化只对富裕城市有意义', '绿化问题无法解决'],
      correct: 1,
      type: 'inference'
    }],
    difficulty: 'medium',
    wordCount: 320,
    timeLimit: 200
  },
  {
    id: 3,
    title: '海洋污染与保护',
    content: `海洋覆盖了地球表面的71%，是地球生命系统的重要组成部分。然而，随着工业化和全球化的发展，海洋正面临前所未有的污染威胁。\n\n塑料污染是海洋面临的最严重问题之一。每年有约800万吨塑料垃圾进入海洋，形成巨大的垃圾岛。这些塑料垃圾不仅影响海洋生物的生存环境，还会通过食物链最终影响人类健康。海龟误食塑料袋，海鸟被塑料绳索缠绕，这样的悲剧每天都在发生。\n\n化学污染同样严重。工业废水、农业化肥和杀虫剂等有毒物质通过河流最终流入大海。这些化学物质会导致海水富营养化，引发赤潮现象，造成大量海洋生物死亡。\n\n石油污染虽然不如前两者频繁，但危害极大。石油泄漏不仅会杀死海洋生物，还会破坏海岸生态系统，影响渔业和旅游业。\n\n保护海洋环境需要全球协作。减少塑料使用，发展可降解材料，严格控制工业排放，建立海洋保护区，这些措施都是必要的。只有人类共同努力，才能还海洋一片蔚蓝。`,
    questions: [{
      id: 1,
      question: '每年有多少塑料垃圾进入海洋？',
      options: ['约500万吨', '约800万吨', '约1000万吨', '约1200万吨'],
      correct: 1,
      type: 'detail'
    }, {
      id: 2,
      question: '文中提到的海洋污染类型不包括：',
      options: ['塑料污染', '化学污染', '石油污染', '噪音污染'],
      correct: 3,
      type: 'detail'
    }, {
      id: 3,
      question: '文中的"赤潮现象"是由什么引起的？',
      options: ['塑料污染', '海水富营养化', '石油泄漏', '气候变暖'],
      correct: 1,
      type: 'vocabulary'
    }, {
      id: 4,
      question: '作者认为解决海洋污染问题需要：',
      options: ['仅靠政府努力', '全球协作和共同努力', '只需要技术进步', '主要依靠市场调节'],
      correct: 1,
      type: 'main_idea'
    }],
    difficulty: 'hard',
    wordCount: 380,
    timeLimit: 240
  },
  {
    id: 4,
    title: '传统手工艺的传承',
    content: `在现代化的浪潮中，许多传统手工艺面临着失传的危险。这些承载着深厚文化底蕴的技艺，曾经是人们生活中不可或缺的一部分，如今却逐渐被机器生产所取代。\n\n以陶艺为例，这门古老的技艺有着数千年的历史。从最初的实用器皿到精美的艺术品，陶艺体现了人类的创造力和审美追求。然而，现代工业生产的瓷器不仅成本低廉，而且质量稳定，使得传统手工陶艺的市场空间越来越小。\n\n纺织业也面临着同样的困境。机器纺织品的大量生产使得手工纺织品显得价格昂贵。年轻人更愿意购买便宜的机器制品，而不是花费大量时间和金钱去学习这些传统技艺。\n\n尽管如此，传统手工艺仍有其独特价值。手工制品具有独特的个性和温度，这是机器无法复制的。更重要的是，这些技艺承载着民族文化的精神内核，是文化传承的重要载体。\n\n为了保护传统手工艺，政府和社会各界都在努力。建立非物质文化遗产保护制度，培养传承人，举办展览和培训班，这些措施都有助于传统手工艺的传承和发展。`,
    questions: [{
      id: 1,
      question: '传统手工艺面临失传的主要原因是：',
      options: ['技艺太难学习', '被机器生产取代', '没有文化价值', '政府不支持'],
      correct: 1,
      type: 'main_idea'
    }, {
      id: 2,
      question: '根据文章，手工制品的独特价值在于：',
      options: ['价格便宜', '质量更好', '具有个性和温度', '生产速度快'],
      correct: 2,
      type: 'detail'
    }, {
      id: 3,
      question: '文章提到的保护措施不包括：',
      options: ['建立保护制度', '培养传承人', '降低生产成本', '举办展览培训'],
      correct: 2,
      type: 'detail'
    }],
    difficulty: 'easy',
    wordCount: 300,
    timeLimit: 160
  },
  {
    id: 5,
    title: '睡眠与健康',
    content: `睡眠是人类生活中不可或缺的生理需求，对身心健康有着深远的影响。然而，在快节奏的现代社会中，睡眠问题已经成为困扰许多人的健康隐患。\n\n科学研究表明，充足的睡眠对大脑功能至关重要。在睡眠过程中，大脑会清理白天积累的代谢废物，巩固记忆，修复神经元损伤。睡眠不足会导致注意力不集中、记忆力下降、判断力受损，长期缺乏睡眠甚至会增加患阿尔茨海默病的风险。\n\n睡眠对身体健康同样重要。在深度睡眠阶段，身体会分泌生长激素，促进组织修复和免疫系统功能。睡眠不足的人更容易患感冒，伤口愈合速度也会变慢。此外，长期睡眠不足还与肥胖、糖尿病、心血管疾病等多种慢性疾病有关。\n\n现代生活方式对睡眠质量造成了很大影响。电子设备发出的蓝光会抑制褪黑激素的分泌，影响人体的生物钟。工作压力、不规律的作息时间、咖啡因摄入过量等因素都会干扰正常的睡眠模式。\n\n改善睡眠质量需要养成良好的睡眠习惯。保持规律的作息时间，睡前避免使用电子设备，创造舒适的睡眠环境，适度运动但避免睡前剧烈活动，这些都有助于提高睡眠质量。如果睡眠问题严重，应该寻求专业医生的帮助。`,
    questions: [{
      id: 1,
      question: '睡眠不足对大脑功能的影响包括：',
      options: ['仅影响记忆力', '注意力不集中、记忆力下降、判断力受损', '只会影响情绪', '主要影响视力'],
      correct: 1,
      type: 'detail'
    }, {
      id: 2,
      question: '深度睡眠阶段身体会分泌什么？',
      options: ['胰岛素', '生长激素', '肾上腺素', '甲状腺素'],
      correct: 1,
      type: 'detail'
    }, {
      id: 3,
      question: '影响睡眠质量的现代生活因素不包括：',
      options: ['蓝光影响', '工作压力', '饮食营养', '不规律作息'],
      correct: 2,
      type: 'detail'
    }, {
      id: 4,
      question: '文章的主要观点是：',
      options: ['睡眠问题无法解决', '充足睡眠对健康至关重要', '现代人不需要太多睡眠', '药物是改善睡眠的最好方法'],
      correct: 1,
      type: 'main_idea'
    }],
    difficulty: 'medium',
    wordCount: 420,
    timeLimit: 220
  },
  {
    id: 6,
    title: '春天的公园',
    content: `春天来了，公园里的景色变得美丽起来。柳树抽出了嫩绿的新芽，在微风中轻柔地摆动。草地上冒出了小草，绿油油的一片。花坛里的花儿也开始绽放，红的、黄的、紫的，五颜六色，非常好看。\n\n小鸟在树枝上唱歌，声音清脆动听。蝴蝶在花丛中飞舞，翅膀轻盈美丽。池塘里的水清澈见底，几条小鱼在水中游来游去。\n\n人们也喜欢来公园散步。老人们在晨练，有的打太极拳，有的跳广场舞。孩子们在草地上奔跑，笑声阵阵。年轻人坐在长椅上聊天，享受着温暖的阳光。\n\n春天的公园真是一个美好的地方，让人心情愉悦。`,
    questions: [{
      id: 1,
      question: '春天公园里的花儿有哪些颜色？',
      options: ['只有红色', '红的、黄的、紫的', '只有黄色和紫色', '只有绿色'],
      correct: 1,
      type: 'detail'
    }, {
      id: 2,
      question: '文中提到的动物有：',
      options: ['小鸟和蝴蝶', '小鸟、蝴蝶和小鱼', '只有小鸟', '只有蝴蝶'],
      correct: 1,
      type: 'detail'
    }, {
      id: 3,
      question: '这篇文章主要描述了：',
      options: ['春天公园的美丽景色', '公园的历史', '如何建设公园', '公园的管理制度'],
      correct: 0,
      type: 'main_idea'
    }],
    difficulty: 'easy',
    wordCount: 180,
    timeLimit: 120
  },
  {
    id: 7,
    title: '量子计算的革命',
    content: `量子计算代表着计算科学的一次根本性革命。与传统计算机使用0和1的二进制位不同，量子计算机利用量子位（qubit）的叠加态和纠缠特性，能够同时处理指数级的信息。\n\n量子叠加是量子计算的核心原理之一。在经典物理学中，一个位只能处于0或1状态，但在量子世界中，一个量子位可以同时处于0和1的叠加态。这意味着n个量子位可以同时存储2^n种状态，而传统的n个位只能存储一种状态。\n\n量子纠缠是另一个关键特性。当两个或多个量子位发生纠缠时，无论它们相距多远，对其中一个量子位的测量都会立即影响其他纠缠的量子位。爱因斯坦称此现象为"鬼魅般的远距离作用"。\n\n量子算法的优势在某些特定问题上极为明显。例如，Shor算法可以在多项式时间内分解大整数，这对现有的RSA加密体系构成了威胁。Grover算法可以在未排序数据库中以平方根时间复杂度进行搜索，相比经典算法有显著提升。\n\n然而，量子计算仍面临巨大技术挑战。量子相干性极易受到环境干扰而发生退相干，量子错误率远高于经典计算机。目前的量子计算机仍处于噪声中等规模量子（NISQ）时代，距离实现容错量子计算还有很长的路要走。\n\n尽管如此，量子计算在密码学、药物发现、材料科学、金融建模等领域展现出巨大潜力。随着量子纠错码的发展和硬件技术的进步，量子计算有望在未来几十年内实现实用化，彻底改变我们处理复杂问题的方式。`,
    questions: [{
      id: 1,
      question: '量子计算机与传统计算机的根本区别在于：',
      options: ['运算速度更快', '使用量子位的叠加态和纠缠特性', '体积更小', '功耗更低'],
      correct: 1,
      type: 'main_idea'
    }, {
      id: 2,
      question: 'n个量子位可以同时存储多少种状态？',
      options: ['n种', '2n种', '2^n种', 'n^2种'],
      correct: 2,
      type: 'detail'
    }, {
      id: 3,
      question: '爱因斯坦把什么现象称为"鬼魅般的远距离作用"？',
      options: ['量子叠加', '量子纠缠', '量子计算', '量子退相干'],
      correct: 1,
      type: 'vocabulary'
    }, {
      id: 4,
      question: 'NISQ时代指的是：',
      options: ['量子计算的黄金时代', '噪声中等规模量子时代', '量子计算的初级阶段', '量子计算的成熟期'],
      correct: 1,
      type: 'vocabulary'
    }, {
      id: 5,
      question: '从文章可以推断出：',
      options: ['量子计算已经完全成熟', '量子计算仍面临技术挑战但前景广阔', '量子计算没有实用价值', '量子计算将完全取代传统计算'],
      correct: 1,
      type: 'inference'
    }],
    difficulty: 'hard',
    wordCount: 520,
    timeLimit: 300
  },
];

const emit = defineEmits(['complete']);

const {t} = useI18n();

const stage = ref('instructions');
const currentPassage = ref(null);
const currentQuestionIndex = ref(0);
const responses = ref([]);
const timeLeft = ref(0);
const startTime = ref(0);
const score = ref(0);
const readingStartTime = ref(0);

let timerInterval = null;

const question = computed(() => currentPassage.value?.questions[currentQuestionIndex.value]);

const selectRandomPassage = () => {
  const difficulties = ['easy', 'medium', 'hard'];
  const selectedDifficulty = difficulties[Math.floor(Math.random() * difficulties.length)];
  const passagesOfDifficulty = ALL_PASSAGES.filter(p => p.difficulty === selectedDifficulty);
  return passagesOfDifficulty[Math.floor(Math.random() * passagesOfDifficulty.length)];
};

const handleStartTest = () => {
  const passage = selectRandomPassage();
  currentPassage.value = passage;
  stage.value = 'reading';
  startTime.value = Date.now();
  readingStartTime.value = Date.now();
  timeLeft.value = passage.timeLimit;
};

const handleStartQuestions = () => {
  stage.value = 'questions';
  currentQuestionIndex.value = 0;
};

const handleAnswer = (answerIndex) => {
  const correct = answerIndex === question.value.correct;
  responses.value.push(answerIndex);
  if (correct) score.value++;

  if (currentQuestionIndex.value < currentPassage.value.questions.length - 1) {
    currentQuestionIndex.value++;
  } else {
    stage.value = 'results';
  }
};

const handleComplete = () => {
  if (!currentPassage.value) return;

  const totalQuestions = currentPassage.value.questions.length;
  const correctAnswers = score.value;
  const accuracy = totalQuestions > 0 ? Math.round((correctAnswers / totalQuestions) * 100) : 0;
  const timeUsed = Math.round((Date.now() - startTime.value) / 1000);
  const readingTime = readingStartTime.value > 0 ? (Date.now() - readingStartTime.value) : 0;
  const readingSpeed = readingTime > 0 ? Math.round((currentPassage.value.wordCount / (readingTime / 1000)) * 60) : 0;

  const typeStats = {};
  currentPassage.value.questions.forEach((q, index) => {
    const type = q.type;
    if (!typeStats[type]) typeStats[type] = {correct: 0, total: 0};
    typeStats[type].total++;
    if (responses.value[index] === q.correct) typeStats[type].correct++;
  });

  const result = {
    id: Date.now().toString(),
    testType: 'reading-comprehension',
    score: accuracy,
    completedAt: new Date(),
    duration: timeUsed,
    details: {
      passageTitle: currentPassage.value.title,
      passageDifficulty: currentPassage.value.difficulty,
      wordCount: currentPassage.value.wordCount,
      readingSpeed,
      totalQuestions,
      correctAnswers,
      accuracy,
      typeBreakdown: Object.entries(typeStats).map(([type, stats]) => ({
        type: type === 'detail' ? t('readingComprehensionTest.typeBreakdownDetail') : type === 'inference' ? t('readingComprehensionTest.typeBreakdownInference') : type === 'main_idea' ? t('readingComprehensionTest.typeBreakdownMainIdea') : type === 'vocabulary' ? t('readingComprehensionTest.typeBreakdownVocabulary') : t('readingComprehensionTest.typeBreakdownAttitude'),
        accuracy: stats.total > 0 ? Math.round((stats.correct / stats.total) * 100) : 0,
        correct: stats.correct,
        total: stats.total
      })),
      passageUsed: currentPassage.value.id
    }
  };

  emit('complete', result);
};

watch(stage, (newStage) => {
  if ((newStage === 'reading' || newStage === 'questions') && timeLeft.value > 0) {
    timerInterval = setInterval(() => {
      if (timeLeft.value <= 1) {
        stage.value = 'results';
        clearInterval(timerInterval);
      } else {
        timeLeft.value--;
      }
    }, 1000);
  } else {
    clearInterval(timerInterval);
  }
});

onBeforeUnmount(() => {
  clearInterval(timerInterval);
});

const progress = computed(() => {
  if (!currentPassage.value || !currentPassage.value.questions) return 0;
  return (currentQuestionIndex.value / currentPassage.value.questions.length) * 100;
});

const finalResult = computed(() => {
  if (stage.value !== 'results' || !currentPassage.value) return {};
  const totalQuestions = currentPassage.value.questions.length;
  const correctAnswers = score.value;
  const accuracy = totalQuestions > 0 ? Math.round((correctAnswers / totalQuestions) * 100) : 0;
  return {accuracy, correctAnswers, totalQuestions};
});

</script>

<template>
  <div v-if="stage === 'instructions'" class="max-w-2xl mx-auto">
    <Card class="bg-white/90 backdrop-blur-sm border-green-200 shadow-lg">
      <CardHeader class="text-center pb-8">
        <div
          class="w-16 h-16 bg-gradient-to-br from-green-600 to-emerald-500 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg">
          <FileText class="w-8 h-8 text-white"/>
        </div>
        <CardTitle class="text-2xl text-slate-800">{{ t('readingComprehensionTest.testTitle') }}</CardTitle>
        <p class="text-slate-600 mt-2">{{ t('readingComprehensionTest.testDescription') }}</p>
      </CardHeader>
      <CardContent class="space-y-6">
        <div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl p-6 border border-green-100">
          <h3 class="font-semibold text-green-900 mb-4 flex items-center gap-2">
            <Star class="w-5 h-5"/>
            {{ t('readingComprehensionTest.instructionsTitle') }}
          </h3>
          <div class="space-y-3 text-slate-700">
            <div class="flex gap-3"><span
              class="w-6 h-6 bg-green-600 text-white rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 mt-0.5">1</span>
              <p>{{ t('readingComprehensionTest.instruction1') }}</p></div>
            <div class="flex gap-3"><span
              class="w-6 h-6 bg-green-600 text-white rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 mt-0.5">2</span>
              <p>{{ t('readingComprehensionTest.instruction2') }}</p></div>
            <div class="flex gap-3"><span
              class="w-6 h-6 bg-green-600 text-white rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 mt-0.5">3</span>
              <p>{{ t('readingComprehensionTest.instruction3') }}</p></div>
            <div class="flex gap-3"><span
              class="w-6 h-6 bg-green-600 text-white rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 mt-0.5">4</span>
              <p>{{ t('readingComprehensionTest.instruction4') }}</p></div>
          </div>
        </div>
        <div class="grid md:grid-cols-2 gap-4">
          <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-4 border border-blue-200"><h4
            class="font-semibold text-blue-800 mb-2">{{ t('readingComprehensionTest.detailUnderstanding') }}</h4>
            <p class="text-sm text-blue-700">{{ t('readingComprehensionTest.detailUnderstandingDescription') }}</p></div>
          <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-4 border border-purple-200"><h4
            class="font-semibold text-purple-800 mb-2">{{ t('readingComprehensionTest.inferenceJudgment') }}</h4>
            <p class="text-sm text-purple-700">{{ t('readingComprehensionTest.inferenceJudgmentDescription') }}</p></div>
        </div>
        <Button class="w-full bg-gradient-to-r from-green-600 to-emerald-500 hover:from-green-700 hover:to-emerald-600 text-white py-3 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200"
                size="lg"
                @click="handleStartTest">{{ t('readingComprehensionTest.startButton') }}
        </Button>
      </CardContent>
    </Card>
  </div>

  <div v-else-if="stage === 'reading' && currentPassage" class="max-w-4xl mx-auto space-y-6">
    <div class="flex flex-col sm:flex-row gap-4 items-center justify-between">
      <div class="flex items-center gap-4">
        <Badge class="bg-green-100 text-green-700 border-green-300" variant="outline">{{ t('readingComprehensionTest.readingStage') }}</Badge>
        <Badge :class="{'bg-blue-100 text-blue-700': currentPassage.difficulty === 'easy', 'bg-yellow-100 text-yellow-700': currentPassage.difficulty === 'medium', 'bg-red-100 text-red-700': currentPassage.difficulty === 'hard' }"
               variant="outline">
          {{ currentPassage.difficulty }}
        </Badge>
        <div class="text-slate-600">{{ t('readingComprehensionTest.wordCount') }}{{ currentPassage.wordCount }}</div>
      </div>
      <div class="flex items-center gap-2">
        <Clock class="w-4 h-4 text-slate-500"/>
        <span :class="['font-mono text-lg font-bold', timeLeft <= 30 ? 'text-red-500' : 'text-slate-700']">{{
            Math.floor(timeLeft / 60)
          }}:{{ (timeLeft % 60).toString().padStart(2, '0') }}</span></div>
    </div>
    <Card class="bg-white/90 backdrop-blur-sm border-green-200 shadow-lg">
      <CardHeader>
        <CardTitle class="text-2xl text-slate-800">{{ currentPassage.title }}</CardTitle>
      </CardHeader>
      <CardContent class="space-y-4">
        <div class="text-slate-700 leading-relaxed whitespace-pre-line text-base">{{ currentPassage.content }}</div>
        <div class="pt-4 border-t">
          <Button class="bg-gradient-to-r from-green-600 to-emerald-500 hover:from-green-700 hover:to-emerald-600 text-white px-8 py-3 font-semibold"
                  @click="handleStartQuestions">
            {{ t('readingComprehensionTest.startAnswering') }}
          </Button>
        </div>
      </CardContent>
    </Card>
  </div>

  <div v-else-if="stage === 'questions' && currentPassage && question" class="max-w-4xl mx-auto space-y-6">
    <div class="flex flex-col sm:flex-row gap-4 items-center justify-between">
      <div class="flex items-center gap-4">
        <Badge class="bg-green-100 text-green-700 border-green-300" variant="outline">{{ t('readingComprehensionTest.question') }} {{
            currentQuestionIndex + 1
          }} / {{ currentPassage.questions.length }}
        </Badge>
        <Badge variant="outline">{{ question.type }}</Badge>
        <div class="flex items-center gap-2 text-slate-600">
          <Trophy class="w-4 h-4"/>
          <span class="font-semibold">{{ score }}</span></div>
      </div>
      <div class="flex items-center gap-2">
        <Clock class="w-4 h-4 text-slate-500"/>
        <span :class="['font-mono text-lg font-bold', timeLeft <= 30 ? 'text-red-500' : 'text-slate-700']">{{
            Math.floor(timeLeft / 60)
          }}:{{ (timeLeft % 60).toString().padStart(2, '0') }}</span></div>
    </div>
    <Progress :model-value="progress" class="h-2"/>
    <Card class="bg-white/90 backdrop-blur-sm border-green-200 shadow-lg">
      <CardHeader>
        <CardTitle class="text-xl text-slate-800">{{ question.question }}</CardTitle>
      </CardHeader>
      <CardContent class="space-y-4">
        <Button v-for="(option, index) in question.options" :key="index" class="w-full h-auto min-h-[3rem] text-left justify-start p-4 hover:bg-green-50 hover:border-green-300"
                variant="outline"
                @click="() => handleAnswer(index)">
          <div class="flex items-center gap-3"><span
            class="w-8 h-8 bg-green-100 text-green-700 rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0">{{
              String.fromCharCode(65 + index)
            }}</span><span class="text-slate-800">{{ option }}</span></div>
        </Button>
      </CardContent>
    </Card>
    <Card class="bg-slate-50 border-slate-200">
      <CardHeader>
        <CardTitle class="text-lg text-slate-700">{{ t('readingComprehensionTest.referencePassage') }}{{ currentPassage.title }}</CardTitle>
      </CardHeader>
      <CardContent>
        <div class="text-slate-600 text-sm leading-relaxed whitespace-pre-line max-h-40 overflow-y-auto">
          {{ currentPassage.content.substring(0, 200) }}...
        </div>
      </CardContent>
    </Card>
  </div>

  <div v-else-if="stage === 'results' && currentPassage" class="max-w-2xl mx-auto">
    <Card class="bg-white/90 backdrop-blur-sm border-green-200 shadow-xl">
      <CardHeader class="text-center pb-6">
        <div
          class="w-20 h-20 bg-gradient-to-br from-green-600 to-emerald-500 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg">
          <Trophy class="w-10 h-10 text-white"/>
        </div>
        <CardTitle class="text-3xl text-slate-800 mb-2">{{ t('readingComprehensionTest.testComplete') }}</CardTitle>
        <div class="text-6xl font-bold bg-gradient-to-r from-green-600 to-emerald-500 bg-clip-text text-transparent">
          {{ finalResult.accuracy }}%
        </div>
        <p class="text-slate-600">{{ t('readingComprehensionTest.accuracyRate') }}</p>
      </CardHeader>
      <CardContent class="space-y-6">
        <div class="grid grid-cols-2 gap-4">
          <div class="text-center p-4 bg-gradient-to-br from-green-50 to-green-100 rounded-xl border border-green-200">
            <div class="text-2xl font-bold text-green-600 mb-1">{{
                finalResult.correctAnswers
              }}/{{ finalResult.totalQuestions }}
            </div>
            <div class="text-sm text-green-700">{{ t('readingComprehensionTest.correctQuestions') }}</div>
          </div>
          <div
            class="text-center p-4 bg-gradient-to-br from-emerald-50 to-emerald-100 rounded-xl border border-emerald-200">
            <div class="text-2xl font-bold text-emerald-600 mb-1">{{ currentPassage.wordCount }}</div>
            <div class="text-sm text-emerald-700">{{ t('readingComprehensionTest.readingWordCount') }}</div>
          </div>
        </div>
        <div class="space-y-3">
          <div class="flex justify-between items-center p-3 bg-slate-50 rounded-lg"><span
            class="text-slate-600">{{ t('readingComprehensionTest.passageTitle') }}</span><span class="font-semibold text-slate-800">{{
              currentPassage.title
            }}</span></div>
          <div class="flex justify-between items-center p-3 bg-slate-50 rounded-lg"><span
            class="text-slate-600">{{ t('readingComprehensionTest.difficultyLevel') }}</span><span
            class="font-semibold text-slate-800">{{ currentPassage.difficulty }}</span></div>
        </div>
        <Button class="w-full bg-gradient-to-r from-green-600 to-emerald-500 hover:from-green-700 hover:to-emerald-600 text-white py-3 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200"
                size="lg"
                @click="handleComplete">{{ t('readingComprehensionTest.viewDetails') }}
        </Button>
      </CardContent>
    </Card>
  </div>
</template>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>
